```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据模型设计可视化</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background-color: #1e293b;
            border-left: 4px solid #8b5cf6;
        }
        .section-title {
            position: relative;
            padding-bottom: 0.5rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 3rem;
            height: 3px;
            background-color: #8b5cf6;
        }
        .mermaid {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">数据模型设计可视化</h1>
                <p class="text-xl md:text-2xl max-w-3xl mx-auto opacity-90">探索现代应用系统核心数据模型的最佳实践</p>
                <div class="mt-10 flex justify-center space-x-4">
                    <button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-300 flex items-center">
                        <i class="fas fa-book-open mr-2"></i> 学习更多
                    </button>
                    <button class="bg-purple-800 bg-opacity-30 text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-40 transition duration-300 flex items-center">
                        <i class="fas fa-code mr-2"></i> 查看代码
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- CMS Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-purple-100 text-purple-800 p-3 rounded-full mr-4">
                    <i class="fas fa-file-alt text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif section-title">内容管理系统数据模型设计</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 text-purple-800 p-2 rounded-full mr-3">
                                <i class="fas fa-list-ul"></i>
                            </div>
                            <h3 class="text-xl font-semibold">CMS系统数据特点</h3>
                        </div>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>内容结构灵活</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>版本控制需求</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>分类体系复杂</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>权限管理严格</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 text-purple-800 p-2 rounded-full mr-3">
                                <i class="fas fa-users-cog"></i>
                            </div>
                            <h3 class="text-xl font-semibold">用户权限模型</h3>
                        </div>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-4 overflow-x-auto">
                            <pre><code>{
  _id: ObjectId(),
  username: "admin",
  roles: ["admin", "editor"],
  permissions: [
    "content.create",
    "content.edit",
    "content.delete"
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mb-10">
                <h3 class="text-2xl font-semibold mb-6 flex items-center">
                    <i class="fas fa-project-diagram text-purple-500 mr-3"></i>
                    文档与分类关系图
                </h3>
                <div class="mermaid">
                    classDiagram
                        class Article {
                            +_id: ObjectId
                            +title: String
                            +content: String
                            +status: String
                            +version: Number
                            +created_at: Date
                            +author: User
                            +categories: Category[]
                            +tags: String[]
                        }
                        
                        class Category {
                            +_id: ObjectId
                            +name: String
                            +slug: String
                            +parent_id: ObjectId
                            +level: Number
                            +path: String[]
                        }
                        
                        Article "1" *-- "1" User
                        Article "1" *-- "n" Category
                </div>
            </div>
        </section>
        
        <!-- E-commerce Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4">
                    <i class="fas fa-shopping-cart text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif section-title">电商平台数据模型设计</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3">
                                <i class="fas fa-box-open"></i>
                            </div>
                            <h3 class="text-xl font-semibold">商品数据模型</h3>
                        </div>
                        <div class="code-block text-gray-200 p-4 rounded-lg overflow-x-auto">
                            <pre><code>{
  _id: ObjectId(),
  sku: "PROD001",
  name: "智能手机",
  price: {
    current: 2999.00,
    original: 3999.00
  },
  inventory: {
    total: 1000,
    available: 800
  },
  categories: [
    { _id: ObjectId(), name: "手机" }
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3">
                                <i class="fas fa-receipt"></i>
                            </div>
                            <h3 class="text-xl font-semibold">订单数据模型</h3>
                        </div>
                        <div class="code-block text-gray-200 p-4 rounded-lg overflow-x-auto">
                            <pre><code>{
  _id: ObjectId(),
  order_number: "ORD202401010001",
  items: [
    {
      product_id: ObjectId(),
      quantity: 1,
      price: 2999.00
    }
  ],
  total_amount: 2999.00,
  status: "pending",
  payment: {
    method: "alipay",
    status: "paid"
  }
}</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mb-10">
                <h3 class="text-2xl font-semibold mb-6 flex items-center">
                    <i class="fas fa-chart-line text-blue-500 mr-3"></i>
                    电商系统数据流
                </h3>
                <div class="mermaid">
                    flowchart TD
                        A[用户] -->|浏览| B(商品目录)
                        B --> C[购物车]
                        C --> D[创建订单]
                        D --> E[支付系统]
                        E --> F[库存系统]
                        F --> G[物流系统]
                        G --> H[用户收货]
                        H --> A
                </div>
            </div>
        </section>
        
        <!-- Social Network Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-pink-100 text-pink-800 p-3 rounded-full mr-4">
                    <i class="fas fa-users text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif section-title">社交网络关系图谱</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-pink-100 text-pink-800 p-2 rounded-full mr-3">
                                <i class="fas fa-user-friends"></i>
                            </div>
                            <h3 class="text-xl font-semibold">用户关系模型</h3>
                        </div>
                        <div class="code-block text-gray-200 p-4 rounded-lg overflow-x-auto">
                            <pre><code>{
  _id: ObjectId(),
  username: "user1",
  followers: [
    { user_id: ObjectId(), followed_at: ISODate() }
  ],
  following: [
    { user_id: ObjectId(), followed_at: ISODate() }
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-pink-100 text-pink-800 p-2 rounded-full mr-3">
                                <i class="fas fa-comment-alt"></i>
                            </div>
                            <h3 class="text-xl font-semibold">社交动态模型</h3>
                        </div>
                        <div class="code-block text-gray-200 p-4 rounded-lg overflow-x-auto">
                            <pre><code>{
  _id: ObjectId(),
  user_id: ObjectId(),
  content: "动态内容...",
  likes: [
    { user_id: ObjectId(), liked_at: ISODate() }
  ],
  comments: [
    {
      user_id: ObjectId(),
      content: "评论内容"
    }
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mb-10">
                <h3 class="text-2xl font-semibold mb-6 flex items-center">
                    <i class="fas fa-share-alt text-pink-500 mr-3"></i>
                    社交关系图谱
                </h3>
                <div class="mermaid">
                    graph LR
                        A[用户A] -->|关注| B[用户B]
                        A -->|关注| C[用户C]
                        B -->|关注| D[用户D]
                        C -->|关注| D
                        D -->|关注| A
                </div>
            </div>
        </section>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 微交互效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.boxShadow = '0 25px 50px -12px rgba(0, 0, 0, 0.25)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.boxShadow = '';
            });
        });
    </script>
</body>
</html>
```